<template>
  <!--  出勤申请 -->
  <div class="ApplicationForm">
    <!-- 头部 --state-->
    <div class="side_1"></div>
    <span class="add_1">申请</span>
    <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
    <!-- 头部 --end-->
    <!-- 表格 --start-->
    <div class="body">
      <div class="form_body">
        <div class="div_title">
          <span>{{ title }}</span>
        </div>
        <!-- 物资申请 -->
        <table v-show="shows==1">
          <tr>
            <td style="width:10%">申请类型</td>
            <td style="width:40%">
              <el-select style="width:75%" v-model="value" placeholder="物资申请" @change="change">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td style="width:10%">用品分类</td>
            <td style="width:40%">
              <el-select v-model="value_1" style="width:75%" @change="Fl">
                <el-option
                  v-for="item in oneList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width:10%">用品类别</td>
            <td style="width:40%">
              <el-select v-model="value_2" style="width:75%" @change="Lb">
                <el-option
                  v-for="item in twoList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </td>

            <td style="width:10%">用品名称</td>
            <td style="width:40%">
              <el-select v-model="value_3" style="width:75%" @change="Mc">
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.goodsName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width:10%">领用数量</td>
            <td colspan="3">
              <el-input v-model="wzNum" placeholder="0" style="width:90%"></el-input>
            </td>
          </tr>
          <tr>
            <td>申请原因</td>
            <td colspan="3">
              <el-input
                placeholder="请输入原因"
                :autosize="{ minRows: 3, maxRows: 5}"
                type="textarea"
                v-model="wzReason"
                style="width:90%;margin:20px 0"
              ></el-input>
            </td>
          </tr>
        </table>

        <!-- end -->
        <!-- 用车申请 -->
        <table v-show="shows==2">
          <tr s>
            <td style="width:10%">申请类型</td>
            <td style="width:40%">
              <el-select v-model="value" placeholder="物资申请" @change="change">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td style="width:10%">车牌号</td>
            <td style="width:40%">
              <el-select v-model="carVal" @change="carchange">
                <el-option
                  v-for="item in carList"
                  :key="item.id"
                  :label="item.carNumber"
                  :value="item.id"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr s>
            <td style="width:10%">驾驶人</td>
            <td style="width:40%">
              <el-input placeholder="请输入姓名" v-model="yc_driver"></el-input>
            </td>
            <td style="width:10%">去往地点</td>
            <td style="width:40%">
              <el-input placeholder="请输入去往地点" v-model="yc_address"></el-input>
            </td>
          </tr>
          <tr>
            <td style="width:10%">用车时间</td>
            <td colspan="3">
              <el-date-picker
                style="width:90%;"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="选择日期"
                type="datetime"
                v-model="yc_time"
              ></el-date-picker>
            </td>
          </tr>
          <tr>
            <td>申请原因</td>
            <td colspan="3">
              <el-input
                placeholder="请输入原因"
                :autosize="{ minRows: 3, maxRows: 5}"
                type="textarea"
                v-model="ycReason"
                style="width:90%;margin:20px 0"
              ></el-input>
            </td>
          </tr>
        </table>

        <!-- end -->
        <!-- 维修申请 -->
        <table v-show="shows==3">
          <tr>
            <td style="width:10%">申请类型</td>
            <td style="width:40%">
              <el-select v-model="value" style="width:75%" placeholder="物资申请" @change="change">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td style="width:10%">设备编号</td>
            <td style="width:40%">
              <el-select v-model="equipmentVal" @change="sbchange">
                <el-option
                  v-for="item in equipmentList"
                  :key="item.id"
                  :label="item.equipmentNumber"
                  :value="item"
                ></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width:10%">设备名称</td>
            <td style="width:40%">
              <el-input placeholder="请输入设备名称" disabled="disabled" v-model="equipmentname"></el-input>
            </td>

            <td style="width:10%">故障时间</td>
            <td style="width:40%">
              <el-date-picker
                style="width: 75%;"
                placeholder="选择故障时间"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                v-model="faultdate"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td style="width:10%">维修时间</td>
            <td style="width:40%">
              <el-date-picker
                style="width: 75%;"
                placeholder="选择维修时间"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                v-model="repairdate"
              ></el-date-picker>
            </td>

            <td style="width:10%">设备地址</td>
            <td style="width:40%">
              <el-input placeholder="请输入设备地址" v-model="sb_address"></el-input>
            </td>
          </tr>

          <tr>
            <td>故障原因</td>
            <td colspan="3">
              <el-input
                placeholder="请输入原因"
                :autosize="{ minRows: 3, maxRows: 5}"
                type="textarea"
                v-model="sbReason"
                style="width:90%;margin:20px 0"
              ></el-input>
            </td>
          </tr>
        </table>

        <!-- end -->
        <!-- 接待申请 -->
        <table v-show="shows==4">
          <tr>
            <td style="width:10%">申请类型</td>
            <td style="width:40%">
              <el-select v-model="value" style="width:75%" placeholder="物资申请" @change="change">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td style="width:10%">接待时间</td>
            <td style="width:40%">
              <el-date-picker
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                placeholder="选择日期"
                v-model="jd_time"
                style="width: 75%;"
              ></el-date-picker>
            </td>
          </tr>
          <tr>
            <td style="width:10%">参与部门</td>
            <td style="width:40%">
              <el-select v-model="departVal" @change="depart" style="width:75%">
                <el-option
                  v-for="item in departList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>
            <td style="width:10%">参与人数</td>
            <td style="width:40%">
              <el-input placeholder="参与人数" v-model="jd_num"></el-input>
            </td>
          </tr>

          <tr>
            <td style="width:10%">接待级别</td>
            <td style="width:40%">
              <el-select v-model="levelVal" style="width:75%" @change="levelchange">
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </td>

            <td style="width:10%">接待地点</td>
            <td style="width:40%">
              <el-input placeholder="接待地点" v-model="jd_address"></el-input>
            </td>
          </tr>

          <tr style="height:150px">
            <td style="width:10%">接待用品</td>
            <td colspan="3">
              <div id="table_1">
                <el-table :data="tableData" height="170" style="width:100%;text-align: center;">
                  <el-table-column label="分类">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.value1"
                        placeholder="分类"
                        @change="jdFl(scope.row,scope.$index)"
                        width="100%"
                      >
                        <el-option
                          v-for="items in jdoneList"
                          :key="items.id"
                          :label="items.typeName"
                          :value="items.id"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="类别">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.value2"
                        placeholder="类别"
                        @change="jdLb(scope.row,scope.$index)"
                        class="jcsty"
                      >
                        <el-option
                          v-for="items in jdtwoList"
                          :key="items.id"
                          :label="items.typeName"
                          :value="items.id"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="名称">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.name" placeholder="名称" class="jcsty">
                        <el-option
                          v-for="items in jdgoods"
                          :key="items.id"
                          :label="items.goodsName"
                          :value="items.id"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.Num" class="jcsty"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        v-show="scope.$index == 0"
                        size="mini"
                        @click="handleAdd(scope)"
                      >{{ scope.row.BtnAdd }}
                      </el-button>
                      <el-button
                        size="mini"
                        v-show="scope.$index !== 0"
                        @click="handleAdd(scope)"
                      >{{ scope.row.BtnName }}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </td>
          </tr>
          <tr>
            <td>接待原因</td>
            <td colspan="3">
              <el-input
                placeholder="请输入原因"
                :autosize="{ minRows: 3, maxRows: 5}"
                type="textarea"
                v-model="jdReason"
                style="width:90%;margin:20px 0"
              ></el-input>
            </td>
          </tr>
        </table>

        <!-- end -->
      </div>
    </div>

    <!-- end -->
    <div class="btn_bottom">
      <el-button type="primary" size="medium" @click="queDing">确定</el-button>
      <el-button type="info" size="medium" @click="quXiao">返回</el-button>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      Mark: 0,
      creater: 0,
      title: "申请",
      options: [{value: 1, label: "物资申请"}, {value: 2, label: "用车申请"}, {value: 3, label: "维修申请"}, {
        value: 4,
        label: "接待申请"
      }],
      value: "物资申请",
      type: 1,//后台
      shows: 1,
      oneList: [],//物资一级分类
      value_1: "",
      value_1_int: 0,//后台
      twoList: [],//物资二级分类
      value_2: "",
      value_2_int: 0,//后台
      goodsList: [],//用品名称
      value_3: "",
      value_3_int: 0,//后台
      wzNum: "",
      wzReason: "",

      carList: [],
      carVal: "",
      carId: 0,
      yc_driver: "",
      yc_address: "",
      yc_time: "",
      ycReason: "",

      equipmentList: [],
      equipmentVal: "",
      equipmentId: 0,
      faultdate: "",
      repairdate: "",
      sb_address: "",
      equipmentname: "",
      sbReason: "",

      levels: [{value: 1, label: "初级接待"}, {value: 2, label: "中级接待"}, {value: 3, label: "高级接待"}],
      levelVal: "",
      levelInt: 0,
      jd_time: "",
      departList: [],
      departVal: "",
      departCode: 0,
      jd_num: "",
      jd_address: "",
      jdReason: "",
      jdoneList: [],
      jdtwoList: [],
      jdgoods: [],
      tableData: [{
        value1: "",
        value2: "",
        name: "",
        Num: "",
        BtnAdd: "新增",
        BtnName: "删除"
      }],
    };
  },
  created() {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getoneList();
    return;
    this.getdepart(); //部门
  },
  methods: {
    quXiao() {
      window.history.go(-1);
    },
    Fh() {
      window.history.go(-1);
    },
    //申请类别
    change(e) {
      this.type = e;
      this.shows = e;
      //获取车型
      if (e == 2) {
        var obj = {creater: this.creater};
        var objs = JSON.stringify(obj);
        let the = {index: 20, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.carList = list;
        });
      }
      //获取车型
      else if (e == 3) {
        var obj = {creater: this.creater};
        var objs = JSON.stringify(obj);
        let the = {index: 21, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.equipmentList = list;
        });
      }
      //接待
      else if (e == 4) {
        //获取部门
        var obj = {creater: this.creater};
        var objs = JSON.stringify(obj);
        let the = {index: 1, jsondata: objs}
        axios.post("/apis/ComApi.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.departList = list;
        });
        //接待用品
        var obj = {creater: this.creater};
        var objs = JSON.stringify(obj);
        let thee = {index: 15, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", thee).then(({data}) => {
          var list = JSON.parse(data.d);
          this.jdoneList = list;
        });
      }
    },
    //jdFl
    jdFl(item, index) {
      this.jdtwoList = [];
      this.jdgoods = [];
      this.tableData[index].value2 = "";
      this.tableData[index].name = "";
      //用品名称
      if (item.value1 != 0) {
        var obj = {fid: item.value1};
        var objs = JSON.stringify(obj);
        let the = {index: 16, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.jdtwoList = list;
        });
      }
    },
    //jdLb
    jdLb(item, index) {
      this.jdgoods = [];
      this.tableData[index].name = "";
      //用品名称
      if (item.value2 != 0) {
        var obj = {fid: item.value2};
        var objs = JSON.stringify(obj);
        let the = {index: 16, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.jdgoods = list;
        });
      }
    },
    //物资一级分类
    getoneList() {
      var obj = {creater: this.creater};
      var objs = JSON.stringify(obj);
      let the = {index: 15, jsondata: objs}
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
        var list = JSON.parse(data.d);
        this.oneList = list;
      });
    },
    //物资分类id
    Fl(e) {
      this.value_1_int = e;
      //物资二级分类
      if (this.value_1_int != 0) {
        var obj = {fid: this.value_1_int};
        var objs = JSON.stringify(obj);
        let the = {index: 16, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.twoList = list;
        });
      }
    },
    //物资二级分类id
    Lb(e) {
      this.value_2_int = e;
      //用品名称
      if (this.value_2_int != 0) {
        var obj = {fid: this.value_2_int};
        var objs = JSON.stringify(obj);
        let the = {index: 16, jsondata: objs}
        axios.post("/apis/MyCenter.asmx/GetData", the).then(({data}) => {
          var list = JSON.parse(data.d);
          this.goodsList = list;
        });
      }
    },
    //物资名称id
    Mc(e) {
      this.value_3_int = e;
    },
    //用车 车型
    carchange(e) {
      this.carId = e;
    },
    //维修
    sbchange(e) {
      this.equipmentId = e.id;
      this.equipmentname = e.name;
    },
    //接待级别
    levelchange(e) {
      this.levelInt = e;
    },
    //接待部门
    depart(e) {
      this.departCode = e;
    },
    //接待用品新增，删除
    handleAdd(i) {
      if (i.$index == 0) {
        var list = {
          value1: "",
          value2: "",
          name: "",
          Num: "",
          BtnName: "删除"
        };
        this.tableData.push(list);
      } else {
        this.tableData.splice(i.$index, 1);
      }
    },
    queDing() {
      if (this.Mark == 0) {
        var obj = {};
        if (this.type == 1) {
          if (this.value_1_int == 0) {
            this.$message.error("请选择用品分类");
            return;
          }
          if (this.value_2_int == 0) {
            this.$message.error("请选择用品种类");
            return;
          }
          if (this.value_3_int == 0) {
            this.$message.error("请选择用品名称");
            return;
          }
          if (this.wzNum == "" || this.wzNum == 0) {
            this.$message.error("请填写领用数量");
            return;
          }
          if (this.wzReason == "") {
            this.$message.error("申请原因非空");
            return;
          }
          obj = {
            type: this.type,
            wzOne: this.value_1_int,
            wTwo: this.value_2_int,
            wzName: this.value_3_int,
            num: this.wzNum,
            reason: this.wzReason,
            creater: this.creater,
          }
        } else if (this.type == 2) {
          if (this.carId == 0) {
            this.$message.error("请选择车辆");
            return;
          }
          if (this.yc_driver == "") {
            this.$message.error("驾驶人非空");
            return;
          }
          if (this.yc_address == "") {
            this.$message.error("去往地点非空");
            return;
          }
          if (this.yc_time == "") {
            this.$message.error("用车时间非空");
            return;
          }
          if (this.ycReason == "") {
            this.$message.error("申请原因非空");
            return;
          }
          obj = {
            type: this.type,
            carId: this.carId,
            driver: this.yc_driver,
            address: this.yc_address,
            time: this.yc_time,
            reason: this.ycReason,
            creater: this.creater,
          }
        } else if (this.type == 3) {
          if (this.equipmentId == 0) {
            this.$message.error("请选择设备");
            return;
          }
          if (this.faultdate == "") {
            this.$message.error("故障时间非空");
            return;
          }
          if (this.repairdate == "") {
            this.$message.error("维修时间非空");
            return;
          }
          if (this.sb_address == "") {
            this.$message.error("设备地址非空");
            return;
          }
          if (this.sbReason == "") {
            this.$message.error("申请原因非空");
            return;
          }
          obj = {
            type: this.type,
            carId: this.equipmentId,
            time: this.faultdate,
            repairdate: this.repairdate,
            address: this.sb_address,
            reason: this.sbReason,
            creater: this.creater,
          }
        } else if (this.type == 4) {
          if (this.levelInt == 0) {
            this.$message.error("请选择接待级别");
            return;
          }
          if (this.jd_time == "") {
            this.$message.error("接待时间非空");
            return;
          }
          if (this.departCode == 0) {
            this.$message.error("请选择参与部门");
            return;
          }
          if (this.jd_num == "") {
            this.$message.error("参与人数非空");
            return;
          }
          if (this.jd_address == "") {
            this.$message.error("接待地点非空");
            return;
          }
          if (this.jdReason == "") {
            this.$message.error("接待原因非空");
            return;
          }
          var list = "";
          for (var i = 0; i < this.tableData.length; i++) {
            list += this.tableData[i].value1 + "@" + this.tableData[i].value2 + "@ " + this.tableData[i].name + "@" + this.tableData[i].Num + "#";
          }
          ;
          obj = {
            type: this.type,
            levelInt: this.levelInt,
            time: this.jd_time,
            departCode: this.departCode,
            num: this.jd_num,
            address: this.jd_address,
            reason: this.jdReason,
            creater: this.creater,
            jdList: list
          }
        }
        var objs = JSON.stringify(obj);
        let the = {index: 5, jsondata: objs};
        // console.log(obj)
        this.Mark = 1;
        axios.post("/apis/MyCenter.asmx/Add", the).then(({data}) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);
          } else {
            this.Mark = 0;
            this.$message.error(list.tip);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';

.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 30px;
}

.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}

.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}

.body {
  width: 98%;
  margin-top: 40px;
  margin-left: 20px;
  background: $white;
  overflow: hidden;
}

.form_body {
  margin-top: 80px;
  width: 1000px;
  // border: 1px solid #000;
  margin: 50px auto;
}

.body_jk {
  width: 98%;
  // height: 1000px;
  margin-top: 40px;
  margin-left: 20px;
  background: $white;
  overflow: hidden;
}

.form_body_jk {
  margin-top: 80px;
  width: 1100px;
  border: 1px solid #f5f5f5;
  margin-left: 50px;
  margin-bottom: 70px;
}

.div_title {
  border: 1px solid $bordercolor;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: 700;
}

.div_title_jk {
  border: 1px solid $bordercolor;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: 700;
}

.btn_bottom {
  margin-top: 30px;
  margin-left: 45%;
}

.span_text_1 {
  margin-left: 20px;
}

table {
  width: 1000px;
}

table,
tr {
  height: 60px;
}

tr td {
  border: 1px solid #e7e7e7;
  border-top: 0.5px;
  text-align: center;
}

.el-select_1 {
  // margin-left: -30%;
  // margin-top: -5%;
  display: inline-block;
  // float: left;
}

.add {
  float: right;
  margin-top: -30px;
  margin-right: 15%;
}

.el-input {
  width: 75%;
}

.el-select {
  width: 75%;
}

.table_jk {
  width: 1100px;
}
</style>
<style>
#table_1 {
  margin: auto;
}

#table_1 .el-table .cell {
  color: #7e7979;
  font-size: 14px;
  font-weight: 400;
}

#table_1 .el-table th {
  /* border: none; */
  /* border: 0.5px solid #e7e7e7; */
  text-align: center;
}

#table_1 .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fff;
}

.jcsty {
  width: 100%;
}
</style>


